<template>
  <div class="tdesign-demo-block-column">
    <t-row
      justify="center"
      :gutter="[
        { xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 40 },
        { xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 40 },
      ]"
      style="margin: 10px"
    >
      <t-col :lg="4" :md="4" :xs="12">
        <div class="card shadow-lg">
          <div class="card-body">
            <div id="userEachart" style="width: 100%; height: 200px"></div>
          </div>
        </div>
      </t-col>
      <t-col :lg="4" :md="4" :xs="12">
        <div class="card shadow-lg">
          <div class="card-body">
            <div id="shareEachart" style="width: 100%; height: 200px"></div>
          </div>
        </div>
      </t-col>
      <t-col :lg="4" :md="4" :xs="12">
        <t-row :gutter="5">
          <t-col
            :lg="3"
            :md="3"
            :xs="6"
            v-for="item in recommend"
            :key="item.alt"
            class="icon-box"
          >
            <div class="card shadow-lg">
              <div class="card-body">
                <div class="card-content">
                  <router-link :to="item.link">
                    <img
                      width="50%"
                      height="50%"
                      :src="item.imgSrc"
                      :alt="item.alt"
                    />
                  </router-link>
                </div>
                <div class="card-title">{{ item.title }}</div>
              </div>
            </div>
          </t-col>
        </t-row>
      </t-col>
      <t-col :lg="4" :md="4" :sm="6">
        <div class="card shadow-lg">
          <div class="card-header">更新日志</div>
          <div class="card-body">
            <div class="setps-demo">
              <div class="tdesign-demo-block">
                <t-steps
                  layout="vertical"
                  theme="dot"
                  sequence="reverse"
                  :current="0"
                  readonly
                >
                  <t-step-item
                    title="布局设计"
                    content="2022-1-9 ~ 2022-至今"
                  ></t-step-item>
                </t-steps>
              </div>
            </div>
          </div>
        </div>
      </t-col>
      <t-col :lg="4" :md="4" :sm="6">
        <div class="card shadow-lg">
          <div class="card-header">依赖消息</div>
          <t-table :data="table" :columns="tableColumns" rowKey="property">
            <!-- 插槽方式 自定义单元格：cell 的值为插槽名称，参数有：{col, colIndex, row, rowIndex}  -->
            <template #type-slot-name="{ col, row }">
              {{ row[col.colKey] }}
            </template>

            <!-- 插槽方式 自定义单元格， colKey 的值默认为插槽名称  -->
            <template #platform="{ row }">
              <attach-icon /><a target="_blank" :href="row.link" class="link">{{
                row.platform
              }}</a>
            </template>
          </t-table>
        </div>
      </t-col>
      <t-col :lg="4" :md="4" :sm="6">
        <div class="card shadow-lg">
          <div class="card-header">公告</div>
          <div class="card-body">
            <img
              width="100%"
              src="https://carp-9g7lbszw78f4411f-1259504677.tcloudbaseapp.com/imgResource/鲤享网站logo.png"
              alt="鲤鱼开发"
            />
          </div>
        </div>
      </t-col>
      <!-- <t-col :lg="4" :md="4" :sm="6">
        <t-list :split="true">
          <t-list-item>
            <t-list-item-meta
              image=""
              title="测试"
              description="列表内容列表内容"
            ></t-list-item-meta>
            <template #action>
              <t-button variant="text" shape="square" @click="To(111)">
                <icon-font name="arrow-right" />
              </t-button>
            </template>
          </t-list-item>
        </t-list>
      </t-col> -->
    </t-row>
  </div>
</template>

<script>
import router from "../../router";
// import { IconFont } from "tdesign-icons-vue";
import { AttachIcon } from "tdesign-icons-vue";
export default {
  name: "Home",
  components: {
    // IconFont,
    AttachIcon,
  },
  data() {
    return {
      carousel: 0,
      recommend: [
        {
          link: "/",
          imgSrc:
            "https://carp-9g7lbszw78f4411f-1259504677.tcloudbaseapp.com/imgResource/文章推荐.svg",
          alt: "文章",
          title: "文章",
        },
        {
          link: "/",
          imgSrc:
            "https://carp-9g7lbszw78f4411f-1259504677.tcloudbaseapp.com/imgResource/网站.svg",
          alt: "网站",
          title: "网站",
        },
        {
          link: "/",
          imgSrc:
            "https://carp-9g7lbszw78f4411f-1259504677.tcloudbaseapp.com/imgResource/公众号.svg",
          alt: "公众号",
          title: "公众号",
        },
      ],
      table: [
        {
          platform: "主框架",
          property: "Vue",
          type: "Vue",
          default: "加载中...",
          link: "https://cn.vuejs.org/",
          needed: "^2.6.11",
        },
        {
          platform: "样式",
          property: "Bootstrap",
          type: "Bootstrap",
          link: "https://v4.bootcss.com/",
          default: "加载中...",
          needed: "^4.6.1",
        },
        {
          platform: "动画",
          property: "css-doodle",
          type: "css-doodle",
          link: "https://css-doodle.com/",
          default: "加载中...",
          needed: "^0.23.1",
        },
        {
          platform: "饼图等等",
          property: "echarts",
          type: "echarts",
          link: "https://echarts.apache.org/zh/index.html",
          default: "加载中...",
          needed: "^5.2.2",
        },
        {
          platform: "腾讯组件",
          property: "tdesign-vue",
          type: "tdesign-vue",
          link: "https://tdesign.tencent.com/",
          default: "加载中...",
          needed: "^0.33.0",
        },
        {
          platform: "Vue路由配置",
          property: "vue-router",
          type: "vue-router",
          link: "https://router.vuejs.org/zh/",
          default: "加载中...",
          needed: "^3.2.0",
        },
        {
          platform: "Vue其他配置",
          property: "vuex",
          type: "vuex",
          link: "https://vuex.vuejs.org/zh/",
          default: "加载中...",
          needed: "^3.4.0",
        },
      ],
      tableColumns: [
        {
          colKey: "type",
          title: "依赖",
          // type-slot-name 会被用于自定义单元格的插槽名称
          cell: "type-slot-name",
        },
        {
          // 没有 cell 的情况下， platform 会被用作自定义单元格的插槽名称
          colKey: "platform",
          title: "来源",
        },
        {
          colKey: "description",
          // render 即可渲染表头，也可以渲染单元格。但 cell 只能渲染单元格，title 只能渲染表头
          render(h, context) {
            const { type, row } = context;
            if (type === "title") return "版本";
            return `${row.needed}`;
          },
        },
      ],
    };
  },
  methods: {
    To(data) {
      router.push("/" + data);
    },
    /**
     * 用户Eachart
     */
    userEchart() {
      /**Eachart */
      var echartDemo = this.$echarts.init(
        document.getElementById("userEachart")
      );
      var option;
      option = {
        title: {
          text: "用户数量",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c}",
        },
        legend: {
          left: "left",
        },
        xAxis: {
          type: "category",
          name: "x",
          splitLine: { show: false },
          data: [new Date().toLocaleDateString()],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        yAxis: {
          type: "log",
          name: "y",
          minorSplitLine: {
            show: true,
          },
        },
        series: [
          {
            name: "普通用户",
            type: "line",
            data: [0],
          },
          {
            name: "管理员",
            type: "line",
            data: [1],
          },
        ],
      };
      echartDemo.setOption(option);
    },
    /**
     *  类目Eachart
     */
    shareEachart() {
      var echartDemo = this.$echarts.init(
        document.getElementById("shareEachart")
      );
      var option;
      option = {
        title: {
          text: "分享类目",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: [""],
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            // prettier-ignore
            data: ["文章","网站","其他"],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "",
            type: "bar",
            data: [10, 20, 30],
            // markPoint: {
            //   data: [
            //     { type: "max", name: "Max" },
            //     { type: "min", name: "Min" },
            //   ],
            // },
          },
        ],
      };
      echartDemo.setOption(option);
    },
  },
  mounted() {
    this.userEchart();
    this.shareEachart();
  },
};
</script>

<style lang="scss" scoped>
.t-list__inner {
  margin: 2%;
}
.icon-box {
  margin-top: 2%;
}
.card {
  margin: 2%;
  background: rgba(255, 255, 255, 0.603);
}
</style>
